{% macro getImages(url, columns=4) %}
    <div id="image-container" class="row d-flex justify-content-start flex-wrap"></div>

    <script>
        async function fetchImages(url) {
            const response = await fetchGet(url);
            const images = response.images || [];

            renderImages(images, {{ columns }});
        }

        function renderImages(images, columns) {
            const container = document.getElementById("image-container");
            container.innerHTML = '';

            if (images.length > 0) {
                const width = 100 / columns + '%';  // 计算每个图片的宽度

                images.forEach((image, index) => {
                    const imageDiv = document.createElement('div');
                    imageDiv.classList.add('p-2', 'd-flex', 'align-items-center', 'justify-content-center');
                    imageDiv.style.flex = `1 1 ${width}`;
                    imageDiv.style.maxWidth = width;
                    imageDiv.style.aspectRatio = "1/1";
                    imageDiv.style.overflow = "hidden";
                    imageDiv.innerHTML = `
                        <img src="${image}" class="rounded shadow" style="width: 100%; height: 100%; object-fit: cover; cursor: pointer;"
                            data-bs-toggle="modal" data-bs-target="#imageModal${index}" onclick="setImageSrc('${image}', ${index})">
                    `;
                    container.appendChild(imageDiv);

                    const modalDiv = document.createElement('div');
                    modalDiv.classList.add('modal', 'fade');
                    modalDiv.id = `imageModal${index}`;
                    modalDiv.tabIndex = -1;
                    modalDiv.setAttribute('aria-hidden', 'true');
                    modalDiv.innerHTML = `
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-body text-center">
                                    <img id="modalImage${index}" src="" class="img-fluid rounded shadow">
                                </div>
                            </div>
                        </div>
                    `;
                    document.body.appendChild(modalDiv);
                });
            } else {
                container.innerHTML = '<p>没有可用的图片。</p>';
            }
        }

        function setImageSrc(imageSrc, index) {
            document.getElementById('modalImage' + index).src = imageSrc;
        }

        fetchImages("{{ url }}");
    </script>
{% endmacro %}


{% macro putImages(url) %}
{% endmacro %}


